<template>
    <vBreadcrumbVue></vBreadcrumbVue>
    <div>
        <a-row :gutter="[8, 16]">
            <a-col :span="24">
                <a-card title="仓库管理" :bordered="false">
                    <a-form ref="formRef" :scrollToFirstError="true"
                        @finish="onFinish">
                        <a-row :gutter="24">
                            <a-col :span="8">
                                <a-form-item  label="仓库名" v-bind="fsf.validateInfos['user.name']"
                                    :required="true">
                                    <a-input class="flex-1" v-model:value="formState.user.name" placeholder="请输入仓库名称" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item :name="['website']" label="仓库域名" v-bind="fsf.validateInfos.website"
                                    :required="true">
                                    <a-input class="flex-1" v-model:value="formState.website" placeholder="请输入仓库域名" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item :name="['user', 'manager']" label="仓库管理员">
                                    <a-input class="flex-1" v-model:value="formState.user.manager"
                                        placeholder="请输入仓库管理员" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item :name="['user', 'sprName']" label="审批人">
                                    <a-select v-model:value="formState.user.sprName">
                                        <a-select-option value="hongjun">红军</a-select-option>
                                        <a-select-option value="lilei">李磊</a-select-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item :name="['user', 'time']" label="生效日期">
                                    <a-range-picker v-model:value="formState.user.time" class="w100" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item :name="['user', 'cktype']" label="仓库类型">
                                    <a-select v-model:value="formState.user.cktype">
                                        <a-select-option value="1">公开</a-select-option>
                                        <a-select-option value="2">私密</a-select-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </a-card>
            </a-col>
            <a-col :span="24">
                <a-card title="任务管理" :bordered="false">
                    <a-form :model="formState" name="nest-messages" @finish="onFinish">
                        <a-row :gutter="24">
                            <a-col :span="8">
                                <a-form-item label="任务名"   v-bind="rwgl.validateInfos.rwm" :required="true">
                                    <a-input class="flex-1" v-model:value="formState.rwm" placeholder="请输入任务名" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item :name="['user', 'maoshu']" label="任务描述" :required="true">
                                    <a-input class="flex-1" v-model:value="formState.maoshu" placeholder="请输入任务描述" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item label="执行人" required>
                                    <a-input class="flex-1" v-model:value="formState.zxr" placeholder="请输入执行人" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item label="责任人" required>
                                    <a-select v-model:value="formState.zrr">
                                        <a-select-option value="hongjun">红军</a-select-option>
                                        <a-select-option value="lilei">李磊</a-select-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item label="提醒时间" required>
                                    <a-range-picker v-model:value="formState.time" class="w100" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item label="任务类型" required>
                                    <a-select v-model:value="formState.rwlx">
                                        <a-select-option value="1">定期执行</a-select-option>
                                        <a-select-option value="2">执行周期</a-select-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </a-card>
            </a-col>
            <a-col :span="24">
                <a-card title="成员管理" :bordered="false">
                    <a-table :pagination="false" :dataSource="dataSource" :columns="columns">
                        <template v-slot:bodyCell="{ text, record, index, column }">
                            <template v-if="['name', 'workId', 'belong'].includes(column.dataIndex)">
                                <div>
                                    <a-input v-if="record.state == 'ed' || record.state == 'add'"
                                        v-model:value="record[column.dataIndex]" :placeholder="column.title"
                                        style="margin: -5px 0" />
                                    <template v-else>
                                        {{ text }}
                                    </template>
                                </div>
                            </template>

                            <template v-if="column.dataIndex == 'editor'">
                                <span class="editable-row-operations">
                                    <a v-if="record.state == 'add'" @click="add(index)">添加</a>
                                    <a v-if="record.state != 'ed' && record.state != 'add'"
                                        @click="editro(index)">编辑</a>
                                    <a v-if="record.state == 'ed'" @click="save(index)">保存</a>
                                    <a v-if="record.state == 'ed'" @click="chanle(index)">取消</a>
                                    <a-popconfirm v-if="record.state != 'ed'" title="是否要删除此行为？" ok-text="确定"
                                        cancel-text="取消" @confirm="confirm(index)" @cancel="cancel">
                                        <a href="#">删除</a>
                                    </a-popconfirm>
                                </span>
                            </template>

                        </template>
                    </a-table>
                    <a-button class="w100 mt8" @click="addMember" type="dashed">新增成员 +</a-button>
                </a-card>
            </a-col>
        </a-row>
    </div>
    <div class="position-re foot-bar ">
        <div class="foot-fix  flex-box justifyContente alignItemse">
            <div class="pd8">

                <a-popover v-if="errorall.length>0" title="表单校验信息">
                    <template #content>
                        <p v-for="(item,index) in errorall">
                            <close-circle-outlined style="color: red;" /><span class="ml8">{{item.errors.join()}}</span>
                        </p>

                    </template>
                    <close-circle-outlined style="color: red;" />
                </a-popover>
                <a-button class="ml8" type="primary" @click.prevent="onSubmit">提交</a-button>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { defineComponent, reactive, ref, toRaw } from 'vue';
import { post, get } from '@/services/api/request';
import type { UnwrapRef } from 'vue';
import { deepMergeKey } from "@/package/util/other/deep";
import { CloseCircleOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import { Form } from 'ant-design-vue';
import type { FormInstance } from 'ant-design-vue';
const useForm = Form.useForm;


interface DataItem {
    key: number;
    belong: string;
    name: string;
    workId: string;
    state: string;
}

const dataSource = ref<any[]>([])
let editableData: UnwrapRef<Record<string, DataItem>> = reactive({});

post('members', '', '').then((res) => {
    dataSource.value = res.page.list
})

const add = (index: any) => {
    save(index)
}

const editro = (index: any) => {
    dataSource.value[index].state = 'ed'
}
const save = (index: any) => {
    dataSource.value[index].state = ''
}
const chanle = (index: any) => {
    dataSource.value[index].state = ''

}

const confirm = (index: any) => {
    delete dataSource.value[index]
    message.success('删除成功');
};

const cancel = (e: MouseEvent) => {
    console.log(e);
    message.error('Click on No');
};



const addMember = () => {
    dataSource.value?.push({ name: '', workId: '', belong: '', state: 'add' })
}

const columns = ref([
    {
        title: '成员姓名',
        dataIndex: 'name',
        width: 300
    },
    {
        title: '工号',
        dataIndex: 'workId',
        width: 450
    },
    {
        title: '所属部门',
        dataIndex: 'belong',
        width: 550
    },
    {
        title: '操作',
        dataIndex: 'editor',
    },
])


const validateMessages = {
    required: '${label} 是必填项',
    types: {
        email: '${label} is not a valid email!',
        number: '${label} is not a valid number!',
        time: '${label} is not a valid number!'
    },
    number: {
        range: '${label} must be between ${min} and ${max}',
    },
};

const formState = reactive({
    website: '',
    user: {
        name: '',
        manager: '',
        sprName: '',
        time: [],
        cktype: ''
    },
    rwm: '',
    time: [],
    maoshu: '',
    zxr: '',
    zrr: '',
    rwlx: '',
});

const formStateRules = reactive({
    
    website: [{
        required: true,
        name:'仓库域名',
        message: '仓库域名 是必填项',
    }],
    'user.name': [{
        required: true,
        message: '仓库名 是必填项',
    }],
    
})
const formStateRulesb = reactive({
    'rwm': [{
        required: true,
        message: '任务名 是必填项',
    }, {
        min: 3,
        max: 5,
        message: '长度 3 到 5',
    }]
})

const fsf = Form.useForm(formState, formStateRules)
const rwgl = Form.useForm(formState, formStateRulesb)
let errorall=ref<any[]>([])

const formRef = ref<FormInstance>();
const onSubmit = () => {
    errorall.value = []
    fsf.validate()
        .then((res) => { console.log(res, toRaw(fsf.modelRef)); })
        .catch(err => {
            console.log(err.errorFields)
            errorall.value = [...errorall.value,...err.errorFields]
        });
    rwgl.validate()
        .then((res) => { console.log(res, toRaw(fsf.modelRef)); })
        .catch(err => {
            console.log(err.errorFields)
            errorall.value = [...errorall.value,...err.errorFields]
        });
};

const onFinish = (values: any) => {
    console.log('Success:', values);
};

</script>
<script lang="ts">
export default {
    name: 'advanced-form'
}
</script>
<style lang="less">
.editable-row-operations a {
    margin-right: 8px;
}

.foot-bar {
    height: 45px;
    margin-top: 30px;
}

.foot-fix {
    background: #fff;
    height: 45px;
    width: calc(100% - 200px);
    position: fixed;
    bottom: 0px;
    left: 200px;
    box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.1);
}
</style>